<template>
    <div class="page-container">
        <el-steps style="margin-bottom: 20px;" :space="200" finish-status="success" process-status="finish"
            :active="step" simple>
            <el-step title="选择商品分类" :icon="step != 0 ? CircleCheck : EditPen" />
            <el-step title="填写商品信息" :icon="step != 1 ? CircleCheck : EditPen" />
            <el-step title="设置商品属性" :icon="step != 2 ? CircleCheck : EditPen" />
            <el-step title="设置商品库存" :icon="step != 3 ? CircleCheck : EditPen" />
        </el-steps>
        <template v-if="step == 0">
        </template>
        <template v-else-if="step == 1">
        </template>
        <template v-else-if="step == 2">
            <el-card header="商品属性">
                <el-form :model="form" label-width="80px" inline>
                    <el-form-item label="商品类型" required>
                        <el-select v-model="form.commodityType" placeholder="商品类型" style="width: 200px;">
                            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="报价方式" required>
                        <el-select v-model="form.offerMethod" multiple clearable placeholder="报价方式"
                            style="width: 400px;">
                            <el-option v-for="item in offerOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-table :data="dataList" style="width: 100%">
                    <el-table-column prop="attrSort" label="属性分类">
                    </el-table-column>
                    <el-table-column prop="attrName" label="属性名称">
                    </el-table-column>
                    <el-table-column prop="attrValue" label="属性值">
                    </el-table-column>
                    <el-table-column prop="defaultValue" label="默认值">
                    </el-table-column>
                    <el-table-column prop="isCustom" label="自定义">
                    </el-table-column>
                    <el-table-column prop="required" label="必填">
                    </el-table-column>
                </el-table>
            </el-card>
        </template>
        <template v-else-if="step == 3">
        </template>
        <div class="flex w-full justify-end mt">
            <el-space>
                <el-button plain @click="handlePrevStep" :disabled="step == 0">上一步，填写商品信息</el-button>
                <el-button type="primary" @click="handleNextStep" v-if="step < 3">下一步，设置商品库存</el-button>
                <el-button type="success" @click="handleNextStep" v-else>设置完成，点击提交</el-button>
            </el-space>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Checked, CircleCheck, Edit, EditPen, Picture, UploadFilled } from '@element-plus/icons-vue';

const step = ref(2)
const form = ref({
    commodityType: '',
    offerMethod: ['平方']
})

const offerOptions = [{
    label: '平方',
    value: 0
}, {
    label: '橖',
    value: 1
}]

const typeOptions = [{
    label: '默认',
    value: 0
}]

const dataList = ref([{
    attrSort: '',
    attrName: '工艺名称',
    attrValue: ['单门'],
    defaultValue: [''],
    isCustom: '数字',
    required: false
}])
function handlePrevStep() {
    step.value--
}
function handleNextStep() {
    step.value++
}
</script>
<style lang="scss" scoped>
.page-container {
    width: 60vw;
    margin: 50px auto;
}
</style>